<div class="flex tab-bar">
  <a
    class="flex-1 flex-column justify-center align-center tab-bar-item"
    v-for="(item,index) in [
        {icon: './images/tabs/news.png', icon_: './images/tabs/news_.png', name: 'NEWS', path: 'index.html'},
        {icon: './images/tabs/match.png', icon_: './images/tabs/match_.png', name: 'MATCH', path: 'match.html'},
        {icon: './images/tabs/follow.png', icon_: './images/tabs/follow_.png', name: 'FOLLOW', path: 'follow.html'},
        {icon: './images/tabs/video.png', icon_: './images/tabs/video_.png', name: 'VIDEO', path: 'video.html'},
        {icon: './images/tabs/stats.png', icon_: './images/tabs/stats_.png', name: 'STATS', path: 'stats.html'},
    ]"
    :class="{'tab-bar-item-active': item.path==filename}"
    :href="item.path"
  >
    <img class="tab-bar-icon" :src="item.path==filename ? item.icon_ : item.icon" alt="" srcset="" />
    <span class="tab-bar-name">{{item.name}}</span>
  </a>
</div>
